<template>
  <div class="paging">
    <div class="item total">
      <p>共{{ amount }}条</p>
    </div>
    <div class="item page-size">
      <ejs-dropdownbutton :items="items">{{ pageSize }}</ejs-dropdownbutton>
    </div>
    <div :class="`${
            current === 1 ? 'item page-num show' : 'item page-num click'
          }`" @click="updateCurrent(item)">
      <p>&lt;</p>
    </div>
    <!-- 总页数大于11 -->
    <template v-if="totalPageNum > 12">
      <div
        v-for="item in 3"
        :key="item"
        class="item page-num click"
        @click="updateCurrent(item)"
      >
        <p>{{ item }}</p>
      </div>
      <div class="item page-num show">
        <p>...</p>
      </div>
      <template v-if="current < 10">
        <div
          v-for="item in 9"
          :key="item"
          :class="`${
            item === current ? 'item page-num show' : 'item page-num click'
          }`"
          @click="updateCurrent(item)"
        >
          <p>{{ item }}</p>
        </div>
        <div class="item page-num show">
          <p>...</p>
        </div>
        <div
          v-for="item in 3"
          :key="item"
          class="item page-num click"
          @click="updateCurrent(totalPageNum - (3 - item))"
        >
          <p>{{ totalPageNum - (3 - item) }}</p>
        </div>
      </template>
      <template v-if="totalPageNum - current < 10">
        <div
          v-for="item in 3"
          :key="item"
          class="item page-num click"
          @click="updateCurrent(item)"
        >
          <p>{{ item }}</p>
        </div>
        <div class="item page-num show">
          <p>...</p>
        </div>
        <div
          v-for="item in 9"
          :key="item"
          :class="`${
            item === current ? 'item page-num show' : 'item page-num click'
          }`"
          @click="updateCurrent(totalPageNum - (9 - item))"
        >
          <p>{{ totalPageNum - (9 - item) }}</p>
        </div>
      </template>
      <template v-if="totalPageNum - current < 10">
        <div
          v-for="item in 3"
          :key="item"
          class="item page-num click"
          @click="updateCurrent(item)"
        >
          <p>{{ item }}</p>
        </div>
        <div class="item page-num show">
          <p>...</p>
        </div>
        <div
          v-for="item in 9"
          :key="item"
          :class="`${
            item === current ? 'item page-num show' : 'item page-num click'
          }`"
          @click="updateCurrent(totalPageNum - (9 - item))"
        >
          <p>{{ totalPageNum - (9 - item) }}</p>
        </div>
      </template>
    </template>
    <div
      class="item page-num click"
      v-if="totalPageNum > current"
      @click="updateCurrent(current + 1)"
    >
      <p>&gt;</p>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { DropDownButtonPlugin } from '@syncfusion/ej2-vue-splitbuttons'
Vue.use(DropDownButtonPlugin)

export default {
  props: ['total', 'pageNum'],
  data() {
    return {
      amount: 605,
      current: 1,
      pageSize: 100,
      totalPageNum: 0,
      items: [
        {
          text: '100'
        },
        {
          text: '500'
        },
        {
          text: '1000'
        }
      ]
    }
  },
  mounted() {
    this.amount = isNaN(this.total) ? 0 : parseInt(this.total)
    this.current = isNaN(this.pageNum) ? 1 : parseInt(this.pageNum)
    this.totalPageNum = Math.ceil(this.amount / this.pageSize)
  },
  methods: {
    updateCurrent(value) {
      if (value === this.current) return
      this.current = value
    }
  }
}
</script>

<style>
.paging {
  display: flex;
  align-items: center;
}
.paging .item {
  margin-left: 5px;
}
.paging .page-num.click p {
  color: #0099ff;
  cursor: pointer;
}
</style>
